<template>
  <!--  面包屑导航-->
  <div class="break">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>人事管理</el-breadcrumb-item>
      <el-breadcrumb-item>出境管理</el-breadcrumb-item>
      <el-breadcrumb-item><b>出境审核</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!-- 搜索工具栏-->
  <div style="margin:40px 20px 20px 20px">
    <el-form :inline="true" ref="searchFormRef" :model="searchFormModel" class="demo-form-inline" style="margin-top: 20px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="searchFormModel.name" placeholder="请输入姓名" clearable />
      </el-form-item>
      <el-form-item label="人员类型" prop="persionstatus" style="width: 250px">
        <el-select v-model="searchFormModel.persionstatus" placeholder="请选择人员类型" clearable>
          <el-option label="合同工" value="合同工"/>
          <el-option label="外聘工" value="外聘工"/>
        </el-select>
      </el-form-item>
      <el-form-item label="职务" prop="office" style="width: 250px">
        <el-select v-model="searchFormModel.office" placeholder="请选择职务" clearable>
          <el-option label="人事" value="人事"/>
          <el-option label="财务" value="财务"/>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status" style="width: 250px">
        <el-select v-model="searchFormModel.status" placeholder="请输入状态" clearable >
          <el-option label="待审核" value="待审核"/>
          <el-option label="已通过" value="已通过"/>
          <el-option label="已驳回" value="已驳回"/>
          <el-option label="已撤销" value="已撤销"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="searchOnSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>

  <!--  数据表格-->
  <div style="margin:20px">
    <el-table :data="blogInfo" stripe border style="width: 100%"
    >
      <el-table-column prop="name" label="申请人" />
      <el-table-column prop="persionstatus" label="人员类型"  />
      <el-table-column prop="begintime" label="开始日期"  />
      <el-table-column prop="endtime" label="结束日期"  />
      <el-table-column prop="cause" label="原因"  />
      <el-table-column prop="look_status" label="是否查看承诺书"  />
      <el-table-column prop="type_abroad" label="出国（境）类型"  />
      <el-table-column prop="office" label="职务"  />
      <el-table-column prop="degree_confidentiality" label="涉密程度"  />
      <el-table-column prop="passport_number" label="护照号码"  />
      <el-table-column prop="destination_departure" label="出国目的地"  />
      <el-table-column prop="approval_number" label="出国审批编号"  />
      <el-table-column prop="group_units" label="组团单位"  />
      <el-table-column prop="travel_country" label="前往国家"  />
      <el-table-column prop="stay_date" label="停留日期"  />
      <el-table-column prop="travel_abroad" label="团队其他成员"  />
      <el-table-column prop="abroad_date" label="日期"  />
      <el-table-column prop="abroad_place" label="地点"  />
      <el-table-column prop="abroad_matter" label="事项"  />
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-tag :type="statusType(scope.row.status)">
            {{ scope.row.status }}
            <span v-if="scope.row.status === '待审核'" class="status-indicator status-s"></span>
            <span v-if="scope.row.status === '已通过'" class="status-indicator status-t"></span>
            <span v-if="scope.row.status === '已驳回'" class="status-indicator status-b"></span>
            <span v-if="scope.row.status === '已撤销'" class="status-indicator status-c"></span>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template #default="scope">
          <el-button
              size="small"
              type="success"
              :disabled="scope.row.status === '已通过' || scope.row.status === '已驳回' || scope.row.status === '已撤回'"
              @click="tableSuccessHandler(scope.row.id)">
            <el-icon><Switch /></el-icon>同意
          </el-button>
          <el-button
              size="small"
              type="danger"
              :disabled="scope.row.status === '已通过' || scope.row.status === '已撤回' || scope.row.status === '已驳回'"
              @click="tableDeleteHandler(scope.row.id)">
            <el-icon><Switch /></el-icon>驳回
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!--  分页-->
  <div class="page">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[3,5]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>

  <!-- 添加模态框 -->
  <el-dialog v-model="dialogAddState" title="添加加班申请" width="680">
    <div>
      <el-form ref="formAddRef" :model="formAdd" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item prop="name" label="申请人">
              <el-input v-model="formAdd.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="persionstatus" label="人员类型">
              <el-select v-model="formAdd.persionstatus" placeholder="请选择人员类型">
                <el-option label="合同工" value="合同工"/>
                <el-option label="外聘工" value="外聘工"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="begintime" label="开始时间">
              <el-input v-model="formAdd.begintime"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="endtime" label="结束时间">
              <el-input v-model="formAdd.endtime"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="cause" label="原因">
              <el-input v-model="formAdd.cause"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="type_abroad" label="出境类型">
              <el-select v-model="formAdd.type_abroad" placeholder="请选择出境类型">
                <el-option label="1" value="1"/>
                <el-option label="2" value="2"/>
                <el-option label="3" value="3"/>
                <el-option label="4" value="4"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="office" label="职务">
              <el-select v-model="formAdd.office" placeholder="请选择职务">
                <el-option label="1" value="1"/>
                <el-option label="2" value="2"/>
                <el-option label="3" value="3"/>
                <el-option label="4" value="4"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="degree_confidentiality" label="涉密程度">
              <el-select v-model="formAdd.degree_confidentiality" placeholder="请选择涉密程度">
                <el-option label="1" value="1"/>
                <el-option label="2" value="2"/>
                <el-option label="3" value="3"/>
                <el-option label="4" value="4"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="passport_number" label="护照号码">
              <el-input v-model="formAdd.passport_number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="destination_departure" label="出国目的地">
              <el-input v-model="formAdd.destination_departure"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="approval_number" label="出国审批编号">
              <el-input v-model="formAdd.approval_number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="group_units" label="组团单位">
              <el-input v-model="formAdd.group_units"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="travel_country" label="前往国家">
              <el-input v-model="formAdd.travel_country"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="stay_date" label="停留日期">
              <el-input v-model="formAdd.stay_date"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="travel_abroad" label="团队其他成员">
              <el-input v-model="formAdd.travel_abroad"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="abroad_date" label="日期">
              <el-input v-model="formAdd.abroad_date"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="abroad_place" label="地点">
              <el-input v-model="formAdd.abroad_place"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="abroad_matter" label="事项">
              <el-input v-model="formAdd.abroad_matter"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogAddOnReset">取消</el-button>
        <el-button type="primary" @click="submitRegisterForm">确认</el-button>
      </div>
    </template>
  </el-dialog>
  <!--  编辑模态框-->
  <el-dialog v-model="dialogEditState" title="修改申请信息" width="700">
    <div>
      <el-form ref="formEditRef" :model="formEdit" label-width="120px">
        <el-form-item v-if="false" prop="id" label="序号">
          <el-input v-model="formEdit.id"></el-input>
        </el-form-item>
        <el-form-item prop="name" label="申请人">
          <el-input v-model="formEdit.name" readonly style="background-color: darkgray"></el-input>
        </el-form-item>
        <el-form-item prop="cause" label="原因">
          <el-input v-model="formEdit.cause" ></el-input>
        </el-form-item>
        <el-form-item prop="travel_abroad" label="团组其他成员">
          <el-input v-model="formEdit.travel_abroad" ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogEditOnReset">取消</el-button>
        <el-button type="primary"  @click="dialogEditOnSubmit" >确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {Unlock,Lock,Delete,Edit,Switch} from "@element-plus/icons";
import {onMounted, reactive, ref} from "vue";
import request from "@/utils/people";
import {ElMessage, ElMessageBox} from "element-plus";
onMounted(()=>{
  getExit();
})

const statusType = (status) => {
  if (status === '已通过') {
    return 'success'; // 绿色
  } else if (status === '待审核') {
    return 'danger'; // 红色
  } else {
    return '';
  }
};
// 表格显示内容
const getExit = () => {
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    // 初始时不包含ID参数
  };
  //模糊查询
  if (searchFormModel.name && searchFormModel.name.trim() !== '') {
    params.name = searchFormModel.name.trim();
  }
  if (searchFormModel.status && searchFormModel.status.trim() !== '') {
    params.status = searchFormModel.status.trim();
  }
  if (searchFormModel.persionstatus && searchFormModel.persionstatus.trim() !== '') {
    params.persionstatus = searchFormModel.persionstatus.trim();
  }
  if (searchFormModel.office && searchFormModel.office.trim() !== '') {
    params.office = searchFormModel.office.trim();
  }
  request({
    url: '/exit/getAll',
    method: 'get',
    params,
  }).then((req) => {
    console.log(req)
    if (200 == req.data.errorCode) {
      blogInfo.value = req.data.data.records.map(item => ({
        ...item,
      }));
      totals.value = req.data.data.total;
    }
  })
}

//分页
const currentPage = ref(1)
const pageSize = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let totals=ref(0);
const  blogInfo=ref([])
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  pageSize.value=val;
  getExit()
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  currentPage.value=val;
  getExit()
}
//搜索
const searchFormRef=ref()
const searchFormModel=reactive({
  name:'',
  persionstatus:'',
  office:'',
  status:''
})
const searchOnSubmit=()=>{
  getExit()
}



///////////////////添加/////////////////////////
const dialogAddState = ref(false);
const formAddData = {
  id:'',
  information_id:'',
  name:'',
  persionstatus:'',
  begintime:'',
  endtime:'',
  cause:'',
  look_status:'',
  type_abroad:'',
  office:'',
  degree_confidentiality:'',
  passport_number:'',
  destination_departure:'',
  approval_number:'',
  group_units:'',
  travel_country:'',
  stay_date:'',
  travel_abroad:'',
  abroad_date:'',
  abroad_place:'',
  abroad_matter:'',
  annex:'',
  status:''
};
const formAdd = reactive({...formAddData});
const addressFormRef = ref(null); // 创建一个ref引用form
// 提交表单
const submitRegisterForm = ()=>{
  request({
    method:'post',
    url:'/exit/insert',
    params:formAdd,
    headers:{'content-type' : "application/json;charset=UTF-8"}
  }).then(req=>{
    ElMessage({
      type:'info',
      message:req.data.msg
    })
    if (200 == req.data.errorCode){
      Object.assign(formAdd,formAddData)
      getExit()
    }
  })
  dialogAddState.value=false;
}

//时间设置//
const formatDate=(value)=> {
  if (!value) {
    // 如果日期时间选择器的值为空，则不进行格式化
    formAdd.overbegintime = '';
    return;
  }
  // 将日期时间字符串转换为Date对象
  const date = new Date(value);
  // 获取年、月、日、小时、分钟和秒
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  const seconds = date.getSeconds().toString().padStart(2, '0');

  // 组合成所需的格式
  formAdd.overbegintime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

const formatDate1=(value)=> {
  if (!value) {
    // 如果日期时间选择器的值为空，则不进行格式化
    formAdd.overendtime = '';
    return;
  }
  // 将日期时间字符串转换为Date对象
  const date = new Date(value);
  // 获取年、月、日、小时、分钟和秒
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  const seconds = date.getSeconds().toString().padStart(2, '0');

  // 组合成所需的格式
  formAdd.overendtime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
//////////////////编辑///////////////////////
const formEdit = reactive({...formAddData})
const tableEditHandler = (rowIndex , rowData) => {
  console.log("-------------")
  console.log(rowIndex)
  console.log(rowData)

  formEdit.id = rowData.id
  formEdit.name= rowData.name
  formEdit.cause = rowData.cause
  formEdit.travel_abroad=rowData.travel_abroad
  dialogEditState.value = true
}
const dialogEditState = ref(false)

const dialogEditOnSubmit = () => {
  request({
    url:'/exit/update',
    method:'put',
    data:JSON.stringify(formEdit),
    headers:{'content-type' : "application/json;charset=UTF-8"}
  }).then(req=>{
    ElMessage({
      type:'info',
      message:req.data.msg
    })
    if (200==req.data.errorCode){
      getExit();
    }
  })
  dialogEditState.value = false
}
const dialogEditOnReset = () => {
  Object.assign(formEdit , formAddData)
  dialogEditState.value = false
}
//同意
const tableSuccessHandler = (id) => {
  request({
    url: `/exit/receive?id=${id}`, // 如果后端通过 URL 参数接收 ID
    method: 'put',
    // 如果后端期望 ID 在请求体中，可以这样设置
    data: JSON.stringify({...formEdit, id }),
    headers: {'content-type': "application/json;charset=UTF-8"}
  }).then(req => {
    ElMessage({
      type: 'info',
      message: req.data.msg
    });
    if (200 === req.data.errorCode) {
      getExit();
    }
  });
  dialogEditState.value = false;
};
//驳回
const tableDeleteHandler = (id) => {
  request({
    url: `/exit/reject?id=${id}`, // 如果后端通过 URL 参数接收 ID
    method: 'put',
    // 如果后端期望 ID 在请求体中，可以这样设置
    data: JSON.stringify({...formEdit, id }),
    headers: {'content-type': "application/json;charset=UTF-8"}
  }).then(req => {
    ElMessage({
      type: 'info',
      message: req.data.msg
    });
    if (200 === req.data.errorCode) {
      getExit();
    }
  });
  dialogEditState.value = false;
};
</script>

<style scoped>
.page{
  margin-left: 40%;
}
.el-breadcrumb{
  font-size: 18px;
}
.break{
  margin: 5px 0 0 10px;
}
.status-indicator {
  display: inline-block;
  width: 10px;
  height: 5px;
  border-radius: 50%;
  margin-left: 5px;
  vertical-align: middle;
  position: relative;
  top: -3px;
  background-color: transparent !important; /* 防止el-tag背景色影响 */
}

.status-s {
  background-color: green;
}
.status-b {
  background-color: green;
}

.status-t {
  background-color: red;
}
.status-c {
  background-color: red;
}
</style>